<style>
    .text-hover-top {
        text-align: justify;
        text-justify: newspaper;
        word-break: break-all;
    }

    .opera-but span,
    .opera-but a {
        display: flex;
        align-items: center;
    }

    .opera-but .block-s {
        width: 1px;
        height: 15px;
        background: #DFDFDF;
        margin: 0 10px;
    }

    #projectDetail .col-detail-3 li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 10px;
        width: 310px;
    }
    .col-detail-1{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<main id="projectDetail" style="padding-bottom:100px">
    <header class="dy-flex border-b" style="background:#f7f7f7">
        <ul class="font-16 dy-flex tabList">
            <li v-for="item in  tabList" :class="{'currentTab':currentTab == item.name}" @click="switchTab(item.name)">
                {{item.name}}</li>
        </ul>
        <span class="font-14 color-999">市场拓展管理-项目详情</span>
    </header>
    <!-- 项目详情 -->
    <section v-if="currentTab == '项目详情'" class="section_detail">
        <div class="aside">
            <span class="icon-GM-label color-E98667 icon"></span>
            <span class="text color-E98667">{{status}}</span>
            <!-- 项目管理 -->
            <button class="btn s-btn-default" @click="goToEdit" v-show="permissions.indexOf('c274') > -1"
                v-if="this.data.expansionProjInfo.status == 'YX' && from == 'manage' ">编辑</button>
            <!-- 项目分派 -->
            <button class="btn s-btn-default" @click="goToEdit" v-show="permissions.indexOf('c280') > -1"
                v-if="this.data.expansionProjInfo.status == 'YX' && from == 'assigin'">编辑</button>
            <!-- 我的项目 -->
            <button class="btn s-btn-default" @click="goToEdit" v-show="permissions.indexOf('c285') > -1"
                v-if="this.data.expansionProjInfo.status == 'YX' && from == 'mypro'">编辑</button>
        </div>
        <div class="section_title">基本信息</div>
        <ul class="col-detail-3">
            <li><span>渠道分类：</span><span>{{data.expansionProjInfo.channelCategoryCodeName || '--'}}</span></li>
            <li><span>渠道名称：</span><span>{{data.expansionProjInfo.channelNameCodeName || '--'}}</span></li>
        </ul>
        <ul class="col-detail-3">
            <li><span>过程管理：</span><span>{{data.expansionProjInfo.processManagerCodeName || '--'}}</span></li>
            <li><span>对接人：</span><span>{{data.expansionProjInfo.assigneeName || '--'}}</span></li>
            <li><span>创建人：</span><span>{{data.expansionProjInfo.creatorName || '--'}}</span></li>
        </ul>
        <div class="block" style="margin:4px 0 30px 0"></div>
        <div class="section_title">
            <span>主要信息</span>
            <span @click="isShow_M = !isShow_M">{{isShow_M?'收起':'展开'}}</span>
        </div>
        <div v-if="isShow_M">
            <ul class="col-detail-3">
                <li><span>项目名称：</span><span>{{data.expansionProjInfo.projName || '--'}}</span></li>
                <li><span>项目性质：</span><span>{{data.expansionProjInfo.projProperty || '--'}}</span></li>
                <li><span>占地面积：</span><span>{{data.expansionProjInfo.areaCoveredAcreage || '--'}}</span></li>
            </ul>
            <ul class="col-detail-3">
                <li><span>建筑面积：</span><span>{{data.expansionProjInfo.buildingCoveredAcreage || '--'}}</span></li>
                <li><span>总楼层：</span><span>{{data.expansionProjInfo.floorCount || '--'}}</span></li>
                <li><span>得房率：</span><span>{{data.expansionProjInfo.roomRates || '--'}}</span></li>
            </ul>
            <ul class="col-detail-3">
                <li><span>标准层高：</span><span>{{data.expansionProjInfo.standardStoreyHeight || '--'}}</span></li>
                <li><span>电梯数：</span><span>{{data.expansionProjInfo.liftCount || '--'}}</span></li>
                <li><span>车位数：</span><span>{{data.expansionProjInfo.parkingCount || '--'}}</span></li>
            </ul>
            <ul class="col-detail-3">
                <li><span>空调数：</span><span>{{data.expansionProjInfo.airConditionerCount || '--'}}</span></li>
                <li><span>租金：</span><span>{{data.expansionProjInfo.rentPrice || '--'}}</span></li>
                <li><span>物业费：</span><span>{{data.expansionProjInfo.propertyFee || '--'}}</span></li>
            </ul>
            <ul class="col-detail-3">
                <li><span>商圈均价：</span><span>{{data.expansionProjInfo.tradeZoneAvgPrice || '--'}}</span></li>
                <li><span>业态：</span><span>{{data.expansionProjInfo.businessForm || '--'}}</span></li>
                <li><span>联系人：</span><span><span
                            style="margin-right:15px">{{data.expansionProjInfo.contactName }}</span>{{data.expansionProjInfo.contactPhoneNum}}</span>
                </li>
            </ul>
            <ul class="col-detail-3">
                <li><span>竣工时间：</span><span>{{data.expansionProjInfo.buildingCompletionDate | formatDate}}</span></li>
            </ul>
            <div class="block1"></div>
            <ul class="col-detail-3">
                <li><span>业主名称：</span><span>{{data.expansionProjInfo.proprietorName || '--'}}</span></li>
                <li><span>业主性质：</span><span>{{data.expansionProjInfo.proprietorProperty || '--'}}</span></li>
                <li><span>开发商：</span><span>{{data.expansionProjInfo.developers || '--'}}</span></li>
            </ul>
            <ul class="col-detail-1">
                <span>地理区位：</span>
                <li>{{data.expansionProjInfo.positionInfo || '--'}}</li>
            </ul>
            <ul class="col-detail-1">
                <span>交通配套：</span>
                <li>{{data.expansionProjInfo.transportationFacilities || '--'}}</li>
            </ul>
            <ul class="col-detail-1">
                <span>项目所在地：</span>
                <li>{{data.expansionProjInfo.provinceName + data.expansionProjInfo.cityName + data.expansionProjInfo.districtName}}
                </li>
            </ul>
            <ul class="col-detail-1">
                <span>详细地址：</span>
                <li>{{data.expansionProjInfo.address || '--'}}
                </li>
            </ul>
            <ul class="col-detail-1">
                <span>项目描述：</span>
                <li>{{data.expansionProjInfo.projDesc || '--'}}</li>
            </ul>
        </div>
        <div v-if="!isShow_M">
            <ul class="col-detail-3">
                <li><span>项目名称：</span><span>{{data.expansionProjInfo.projName || '--'}}</span></li>
                <li><span>联系人：</span><span>{{data.expansionProjInfo.contactName || '--'}}</span></li>
            </ul>
            <div class="dy-flex">
                <ul class="col-detail-4">
                    <span>项目所在地：</span>
                    <li>{{data.expansionProjInfo.provinceName + data.expansionProjInfo.cityName + data.expansionProjInfo.districtName}}
                    </li>
                </ul>
                <ul class="col-detail-5">
                    <span>详细地址：</span>
                    <li>{{data.expansionProjInfo.address || '--'}}
                    </li>
                </ul>
            </div>
        </div>
        <div class="block" style="margin:20px 0 30px 0"></div>
        <!-- 自定义 -->
        <div class="mt-15">
        	<hl-custom-fileds type="MARKET_EXPANSION_PROJECT" mode="detail" :data="tmpData"></hl-custom-fileds>
        </div>
				
        <div class="section_title" v-if="data.imagesUrl.length">项目图片</div>
        <div class="pic_container" v-if="data.imagesUrl.length">
            <ul :style="{width:widthPic+'px'}">
                <li ref="picLi" v-for="item in data.imagesUrl" @click="previewImage(item.url)"><img :src="item.url"
                        alt=""></li>
            </ul>
        </div>
        <div class="block" style="margin:20px 0 30px 0" v-if="data.imagesUrl.length"></div>
        <div class="section_title">
            <span>详细信息</span>
            <span @click="isShow_D = !isShow_D">{{isShow_D?'收起':'展开'}}</span>
        </div>
        <div v-show="isShow_D">
            <ul class="col-detail-3">
                <li><span>项目法定名称：</span><span>{{data.expansionProjInfo.projLegalName || '--'}}</span></li>
                <li><span>项目公司全称：</span><span>{{data.expansionProjInfo.companyFullName || '--'}}</span></li>
                <li><span>法人：</span><span>{{data.expansionProjInfo.legalPersonName || '--'}}</span></li>
            </ul>
            <ul class="col-detail-3">
                <li><span>项目产权人：</span><span>{{data.expansionProjInfo.projPrOwnerName || '--'}}</span></li>
                <li><span>关联公司：</span><span>{{data.expansionProjInfo.projPrOwnerName || '--'}}</span></li>
                <li><span>可出租面积：</span><span>{{data.expansionProjInfo.rentAcreage || '--'}}</span></li>
            </ul>
            <ul class="col-detail-3">
                <li><span>土地使用权到期日：</span><span>{{data.expansionProjInfo.landUseRightsExpireDate | formatDate}}</span>
                </li>
                <li><span>加入物业组合日期：</span><span>{{data.expansionProjInfo.propertyAccessionDate | formatDate}}</span>
                </li>
                <li><span>权益系数：</span><span>{{data.expansionProjInfo.rightsInterestsRates || '--'}}</span></li>
            </ul>
            <ul class="col-detail-1">
                <span>物业概况：</span>
                <li>{{data.expansionProjInfo.propertyProfile || '--'}}</li>
            </ul>
        </div>
        <div class="block" style="margin:20px 0"></div>
        <div v-if="this.data.expansionProjInfo.status == 'YX'">
            <button type="button" class="btn n-btn-primary" @click="goTofollow">跟进项目</button>
            <!-- 项目管理 -->
            <button type="button" class="btn n-btn-outline" style="margin-left:16px"
                v-show="permissions.indexOf('c275') > -1" @click="closeReason" v-if="from == 'manage'">关闭项目</button>
            <button type="button" class="btn n-btn-outline" v-show="permissions.indexOf('c276') > -1"
                @click="runOperate" style="margin-left:16px" v-if="from == 'manage'">转运营</button>
            <!-- 项目分派 -->
            <button type="button" class="btn n-btn-outline" style="margin-left:16px"
                v-show="permissions.indexOf('c278') > -1" @click="closeReason" v-if="from == 'assigin'">关闭项目</button>
            <button type="button" class="btn n-btn-outline" v-show="permissions.indexOf('c282') > -1"
                @click="runOperate" style="margin-left:16px" v-if="from == 'assigin'">转运营</button>
            <!-- 我的项目 -->
            <button type="button" class="btn n-btn-outline" style="margin-left:16px"
                v-show="permissions.indexOf('c286') > -1" @click="closeReason" v-if="from == 'mypro'">关闭项目</button>
            <button type="button" class="btn n-btn-outline" v-show="permissions.indexOf('c287') > -1"
                @click="runOperate" style="margin-left:16px" v-if="from == 'mypro'">转运营</button>
        </div>

        <!-- 关闭项目 -->
        <div class="pop add-account-pop box-o-shadow" v-if="isShowPic">
            <img :src="picUrl" alt="">
        </div>
        <div class="pop add-account-pop box-o-shadow" style="width:440px;" v-if="isClose">
            <div class="head-pop font-16">
                <span>关闭项目</span>
                <button class="fw-close absolute" @click="isClose = false">×</button>
            </div>
            <form id="add-user-form">
                <div class="content-pop">
                    <label class="font-nm">
                        <span>关闭原因：</span>
                        <div style="width:300px">
                            <div class="select-ul">
                                <span class="select-name br-4 box-i-shadow">请选择</span>
                                <ul>
                                    <li v-for="(item, index) in reasonList" @click="selectReason(item.dictCode)">
                                        {{item.dictName}}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </label>
                    <label class="font-nm">
                        <span>关闭说明：</span>
                        <div>
                            <textarea type="text" class="form-control add-account" name="account" placeholder="非必填"
                                v-model="colse_reason_desc"></textarea>
                        </div>
                    </label>
                </div>
                <div class="text-center ptb-10">
                    <button type="button" class="btn n-btn-primary" style="margin-right:50px"
                        @click="sureClose">确认</button>
                    <button type="button" class="btn n-btn-outline" @click="isClose = false">取消</button>
                </div>
            </form>
        </div>
    </section>
    <!-- 跟进记录 -->
    <section v-if="currentTab == '跟进记录'" class="business-follow-container">
        <div class="change_show" @click="showType = !showType"><span class="icon-GM-switch"
                style="margin-right:5px"></span>切换显示方式</div>
        <div v-show="showType" class="hl-table" @mouseenter="showScroll" @mouseleave="hideScroll"
            v-if="followList.length">
            <div class="scroll-wrap" :class="{'showScroll':isScroll}" ref="scrollLeft">
                <ul class="tb-title" style="width:1138px;">
                    <li style="width:80px;">序号</li>
                    <li style="width:140px;">跟进时间</li>
                    <li style="width:150px;">跟进人</li>
                    <li style="width:88px;">跟进方式</li>
                    <li style="width:198px;">跟进记录</li>
                    <li style="width:140px;">计划跟进时间</li>
                    <li style="width:190px;">计划跟进内容</li>
                    <li style="width:144px;display: flex;align-items: center;justify-content: center;"
                        @click="sortByRecordTime">记录时间
                        <span class="icon-Gm-sort-ascending bt-icon" v-show="orders == 'asc'">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </span>
                        <span class="icon-Gm-sort-descending bt-icon" v-show="orders == 'desc'">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </span>
                    </li>
                </ul>
                <div class="tb-content" style="width:1138px;">
                    <div class="content-item" v-for="(item,index) in followList">
                        <div style="width:80px;">{{ index + 1 }}</div>
                        <div style="width:140px;" class="ellipsis-1">{{item.followupTime | formatDate}}</div>
                        <div style="width:150px;" class="ellipsis-1">{{item.followUsername}}</div>
                        <div style="width:88px;" class="ellipsis-1">{{item.followupTypeCodeName}}</div>
                        <div style="width:198px;" class="ellipsis-1">{{item.followupMemo | max8lenOff}}
                            <a class="mr-5 cursor relative" v-if='item.followupMemo && item.followupMemo.length>8'
                                @mouseenter="hoverText($event, item.followupMemo)" @mouseleave="mouseleaveOut">详情</a>
                        </div>
                        <div style="width:140px;" class="ellipsis-1">{{item.planFollowupTime | formatDate}}
                        </div>
                        <div style="width:190px;border-right: 1px solid #e5e5e5;" class="ellipsis-1">
                            {{item.planFollowupContent | formatUndefined}}
                        </div>
                        <div style="width:144px;" class="ellipsis-1">{{item.createTime | formatDate}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="" v-show="!showType" style="border-left:2px solid #EDEDED;padding-left:12px">
            <ul v-for="(item,index) in followList" class="recordItem">
                <li class="recordItem_1">
                    <span
                        style="margin-right:8px">{{item.followupTime | formatDate}}</span>{{item.followupTypeCodeName}}<span></span>
                </li>
                <li class="recordItem_2">{{item.followUsername}}</li>
                <li class="recordItem_3" v-if="item.followupMemo">{{item.followupMemo}}</li>
                <li class="recordItem_4">
                    <span style="margin-bottom:10px">计划跟进时间：{{item.planFollowupTime | formatDate}}</span>
                    <span>计划跟进内容：{{item.planFollowupContent}}</span>
                </li>
                <li class="recordItem_5">记录时间：{{item.createTime | formatDate}}</li>
                <li class="recordItem_6"></li>
            </ul>
        </div>
        <div class="pt-10">
            <button type="button" class="btn n-btn-primary" @click="goTofollow"
                v-if="this.data.expansionProjInfo.status == 'YX'">跟进项目</button>
        </div>
    </section>
    <!-- 联系人 -->
    <section v-if="currentTab == '联系人'">
        <div class="wg-list-wrap br-4 global_table" style="border:1px solid #E5E5E5">
            <div class="wg-list-head dy-flex global_table_title">
                <div class="dy-fx-3">签订人</div>
                <div class="dy-fx-3">联系电话</div>
                <div class="dy-fx-3">备注</div>
                <div class="dy-fx-2 border-l">操作</div>
            </div>

            <div>
                <ul class="wg-list dy-flex border-t global_table_item" v-for="(item, index) in contactList">
                    <li class="dy-fx-3">{{item.name}}</li>
                    <li class="dy-fx-3">{{item.phone}}</li>
                    <li class="dy-fx-3 ellipsis-1" :title="item.memo && item.memo.length>18?item.memo:''">{{item.memo}}
                    </li>
                    <li class="dy-fx-2 border-l">
                        <a href="javascript:;" class="mr-5" @click="add_editContact('edits',item)">编辑</a>
                        <a href="javascript:;" @click="delItem(item.id)">删除</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="mt-15">
            <button class="n-btn-primary br-4" @click="add_editContact('add')">新建联系人</button>
        </div>
        <!-- 新建联系人 -->
        <div class="mark-cm-fw" v-if="add_edit_contact">
            <div class="cm-pop-lspeople br-4">
                <div class="cm-title" ref="title">新建联系人</div>
                <div class="icon-Gm-close cm-close-fw cursor" @click="add_edit_contact = false"></div>
                <div class="cm-container">
                    <div class="dy-flex line-height-34">
                        <div class="cm-container-row-title"><span class="required">*</span>联系人：</div>
                        <div style="width:240px"><input type="text" class="form-control" v-model="contact_name" />
                        </div>
                    </div>
                    <div class="dy-flex line-height-34 mt-10">
                        <div class="cm-container-row-title"><span class="required">*</span>联系电话：</div>
                        <div style="width:240px"><input type="text" class="form-control" v-model="contact_phone" />
                        </div>
                    </div>
                    <div class="dy-flex line-height-34 mt-10">
                        <div class="cm-container-row-title"><span style="color:#f2f2f2;">*</span>备注：</div>
                        <div style="width:300px"><textarea type="text" class="form-control" rows="4"
                                v-model="contact_memo"></textarea></div>
                    </div>
                </div>
                <div class="text-center button-cm">
                    <button class="n-btn-primary br-4 mr-24" @click="setContact">确定</button>
                    <button class="n-btn-outline br-4" @click="add_edit_contact = false">取消</button>
                </div>
            </div>
        </div>
    </section>
    <!-- 相关文件 -->
    <section v-if="currentTab == '相关文件'" style="margin-top:-24px">
        <div class="contract-file-container mt-15">
            <div class="upload-head-contract clearfix border-b pb-10">
                <div class="pull-left font-16 line-height-34">文件列表</div>
                <button class="pull-right s-btn-default btn font-14 upload-file" @click="uploadFile">上传文件</button>
            </div>
            <div>
                <ul>
                    <li class="clearfix border-b" v-for="(item,index) in attachmentsList">
                        <p class="icon-Nav-contract-file file-name">
                            <span>{{item.name}}</span>
                        </p>
                        <p class="pull-right line-height-45 file-btn dy-flex opera-but"
                            style="align-items: center;height: 45px">
                            <a class="icon-Gm-delete opera-but-first" v-if="permissions.indexOf('c91') > -1"
                                @click="delfileItem(item.id)">
                                <b>删除</b>
                            </a>
                            <span class="block-D-P-D" v-if="permissions.indexOf('c91') > -1"></span>
                            <a class="icon-GM-preview" @click="previewImage(item.url)">
                                <b>预览</b>
                            </a>
                            <span class="block-D-P-D"></span>
                            <a :href="item.url" :download="item.name" class="icon-Gm-download">
                                <b>下载</b>
                            </a>
                        </p>
                    </li>
                </ul>
            </div>
    </section>
    <div class="upload-file-button"></div>
    <div class="backdrop" v-if="isClose"></div>
    <div class="backdrop" v-if="isShowPic"></div>
    <div class="text-hover-top" v-if="texthover" :style="{left:lefthover, top:tophover}">{{textLong}}</div>
    <div class="loadprogress" v-if="progress">正在上传({{progress}})...</div>
</main>
<script src="modules/market/scripts/project_detail.js" charset="utf-8"></script>
